<template>
  <div :class="getClassName(subId)">
    <Tree :data="trueData" multiple></Tree>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      trueData: [],
      serviceItem: {}
    };
  },
  computed: {
    ...mapState({
      treeData: state => state.oneMap.treeData,
      userServiceId: state => state.oneMap.userServiceId
    })
  },
  mounted() {
    let tempStr = JSON.stringify(this.treeData);
    let regex1 = /true/g;
    let temp1 = tempStr.replace(regex1, "false");
    let tempObj = JSON.parse(temp1);
    this.trueData = [].concat(tempObj);
    this.addRender(this.trueData);
  },
  props: ["subId"],
  methods: {
    getClassName(index) {
      if (index == "1") {
        return "sublayer1";
      } else if (index == "2") {
        return "sublayer2";
      } else if (index == "3") {
        return "sublayer3";
      } else {
        return "sublayer4";
      }
    },
    getData(index) {
      let result = [];

      result.push(this.tempStr);
      result.push(this.tempStr);
      result.push(this.tempStr);
      result.push(this.tempStr);

      return JSON.parse(result[index - 1]);
    },
    renderRoot(h, { root, node, data }) {
      let that = this;
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            width: "100%",
            "font-size": "14px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "500",
            color: "rgba(52,67,78,1)",
            cursor: "pointer"
          },
          on: {
            click() {
              node.node.expand = !node.node.expand;
            },
            mouseover(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              }
            },
            mouseleave(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "white";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "white";
              }
            }
          }
        },
        [
          h("Icon", {
            props: {
              type: node.node.expand ? "ios-arrow-down" : "ios-arrow-forward"
            }
          }),
          h("span", data.title),
          h("Divider", {
            style: {
              margin: "0",
              width: "100%",
              "margin-top": "8px"
            }
          })
        ]
      );
    },
    renderNode(h, { root, node, data }) {
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            height: "28px",
            width: "100%",
            "font-size": "12px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "500",
            "margin-left": "4px",
            color: "rgba(52,67,78,1)",
            cursor: "pointer"
          },
          on: {
            click() {
              node.node.expand = !node.node.expand;
            },
            mouseover(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              }
            },
            mouseleave(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "white";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "white";
              }
            }
          }
        },
        [
          h("Icon", {
            props: {
              type: node.node.expand ? "ios-arrow-down" : "ios-arrow-forward"
            }
          }),
          h("span", data.title)
        ]
      );
    },
    renderService(h, { root, node, data }) {
      let that = this;
      let color = "rgba(52,67,78,1)";
      let serviceState = that.userServiceId.indexOf(node.node.id) == -1;
      if (serviceState) {
        color = "gray";
      }
      return h(
        "div",
        {
          style: {
            display: "inline-block",
            height: "28px",
            width: "100%",
            "font-size": "12px",
            "font-family": "PingFangSC-Medium,PingFang SC",
            "font-weight": "500",
            color: color,
            cursor: "pointer"
          },
          script: {},
          on: {
            click() {
              if (!serviceState) {
                node.node.selected = !node.node.selected;
                that.$emit("urlName", node.node);
              } else {
                node.node.selected = false;
              }
            },
            mouseover(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "rgba(236,241,243,1)";
              }
            },
            mouseleave(e) {
              let target;
              if (e.target.nodeName == "DIV") {
                target = e.target;
                target.style.backgroundColor = "white";
              } else {
                target = e.target.parentNode;
                target.style.backgroundColor = "white";
              }
            }
          }
        },
        [
          h("Checkbox", {
            props: {
              disabled: serviceState,
              value: node.node.selected && !serviceState
            }
          }),
          h("span", data.title)
        ]
      );
    },
    addRender(data) {
      data.forEach(item1 => {
        item1.render = this.renderRoot;
        if (item1.hasOwnProperty("children") && item1.children.length > 0) {
          item1.children.forEach(item2 => {
            if (item2.hasOwnProperty("isShowPopup")) {
              item2.render = this.renderService;
            } else {
              item2.render = this.renderNode;
              if (
                item2.hasOwnProperty("children") &&
                item2.children.length > 0
              ) {
                item2.children.forEach(item3 => {
                  if (item3.hasOwnProperty("isShowPopup")) {
                    item3.render = this.renderService;
                  } else {
                    item3.render = this.renderNode;
                    if (
                      item3.hasOwnProperty("children") &&
                      item3.children.length > 0
                    ) {
                      item3.children.forEach(item4 => {
                        if (item4.hasOwnProperty("isShowPopup")) {
                          item4.render = this.renderService;
                        } else {
                          item4.render = this.renderNode;
                          if (
                            item4.hasOwnProperty("children") &&
                            item4.children.length > 0
                          ) {
                            item4.children.forEach(item5 => {
                              item5.render = this.renderService;
                            });
                          }
                        }
                      });
                    }
                  }
                });
              }
            }
          });
        }
      });

      let vuexTree = [].concat(this.treeData);
      this.$store.dispatch("oneMap/updateTreeDataState", vuexTree);
    }
  }
};
</script>
<style scoped>
.sublayer1,
.sublayer2,
.sublayer3,
.sublayer4 {
  width: 230px;
  height: 360px;
  position: absolute;
  background-color: white;
  overflow-y: scroll;
  overflow-x: hidden;
}
.sublayer1,.sublayer2,.sublayer3,.sublayer4 {
  top: 50px;
  left: 65px;
}

.sublayer1 /deep/ .ivu-tree-arrow,
.sublayer2 /deep/ .ivu-tree-arrow,
.sublayer3 /deep/ .ivu-tree-arrow,
.sublayer4 /deep/ .ivu-tree-arrow {
  display: none !important;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(204, 204, 204);
}
</style>
